<template>
    <div class="box">
        <Header @addInfo="addInfo"></Header>
        <list :info="info" :delInfo="delInfo" :changeFlag="changeFlag"></list>
        <Footer :all="info.length" :selectNum="selectNum" :allSelectIsOrNo="allSelectIsOrNo" :allSelectInfo="allSelectInfo" :selectAllDel="selectAllDel"></Footer>
    </div>
</template>

<script lang="ts">
import { defineComponent,reactive ,ref,watch,computed} from 'vue'
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import List from './components/List.vue';
import {info} from './types/Info'
export default defineComponent({
    setup () {
        const info = reactive<info[]>([
            {
                id:0,
                title:'吃饭',
                flag:false
            },
            {
                id:1,
                title:'睡觉',
                flag:false
            },
            {
                id:2,
                title:'打豆豆',
                flag:false
            }
        ])
        const addInfo = (title:string)=>{
            info.push({
                id:info.length,
                title,
                flag:false
            })
        }
        const delInfo = (index:number)=>{
            info.splice(index,1);
        }
        const changeFlag = (info:info,value:boolean)=>{
            info.flag = value; 
            console.log(value);
        }
        const selectNum = ref<number>(0);
        watch(info,(value)=>{
            console.log(value);
            selectNum.value = value.reduce((pre,item)=>{
                return item.flag == true?pre+1:pre;
            },0);
        },{
            deep:true,
            immediate:true
        })
        const allSelectIsOrNo = computed(()=>{
            return selectNum.value == info.length ? true : false;
        })
        const allSelectInfo = (value:boolean)=>{
            info.forEach((item)=>{
                item.flag = value;
            })
        }
        const selectAllDel = ()=>{
            const arr = info.filter((item)=>{
                return item.flag = false;
            });
            info.length = 0;
            arr.forEach((item)=>{
                info.push(item);
            })
        }
        return {
            info,
            addInfo,
            delInfo,
            changeFlag,
            selectNum,
            allSelectIsOrNo,
            allSelectInfo,
            selectAllDel
        }
    },
    components:{
        Header,
        Footer,
        List
    }
})
</script>

<style scoped>
.box{
    width: 350px;
    border:1px solid black;
    margin: auto;
}
</style>